﻿<Window x:Class="WPFCustomLayoutPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Local="clr-namespace:WPFCustomLayoutPanel"
        xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.SampleDataSource" 
        Title="MainWindow" Height="600" Width="600">
    
    <Window.Resources>

        <SampleData:SampleDataSource x:Key="SampleDataSource" />

        <DataTemplate x:Key="DataTemplateFilmStripPanelItem" >
            <Border VerticalAlignment="Center" HorizontalAlignment="Center" Padding="4" Margin="4" Background="White" Focusable="False" x:Name="myBorder">
                <Image Source="{Binding Path=Image}" Focusable="False" />
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
                    <Setter TargetName="myBorder" Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                                <GradientStop Color="Red" Offset="1"/>
                                <GradientStop Color="Green" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

    </Window.Resources>

    <Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
    
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="75" />
        </Grid.RowDefinitions>

        <Image
            Grid.Column="1"
            Grid.Row="0"
            Source="{Binding Path=Collection.CurrentItem.Image}"
            />            
        
        <ListBox
            Grid.Column="0"
            Grid.Row="0"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
            IsSynchronizedWithCurrentItem="True"
			ItemsSource="{Binding Path=Collection}" 
            ItemTemplate="{DynamicResource DataTemplateFilmStripPanelItem}"
            >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Local:FilmStripPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

        <ListBox
            Grid.Column="1"
            Grid.Row="1"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            IsSynchronizedWithCurrentItem="True"
			ItemsSource="{Binding Path=Collection}" 
            ItemTemplate="{DynamicResource DataTemplateFilmStripPanelItem}"
            >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Local:FilmStripPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

    </Grid>
    
</Window>
